<template>
    <el-cascader
        v-model="cityValue"
        :options="options"
        :placeholder='placeholder'
        size='small'
        :disabled='disabled'
        clearable
        @change='onChange'
        :props="cascaderProps"
    ></el-cascader>
</template>

<script>
import areaList from './areaList.json'
export default {
    name: 'CityCascader',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            required: true,
            type: Array
        },
        placeholder: {
            type: String,
            default: '省市区镇'
        },
        // 是否能选任意一级
        chooseEvery: {
            type: Boolean,
            default: true
        },
        // 最大层级
        maxLevel: {
            type: Number,
            default: 4
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            cityValue: [],
            // 初始选项省
            options: [],
            valueCode: [],
            cascaderProps: {
                label: 'name',
                value: 'code',
                children: 'children',
                checkStrictly: this.chooseEvery,
                multiple: true
            }
        }
    },
    watch: {
        value: {
            immediate: true,
            handler (value) {
                if (value.length) {
                    if (!Array.isArray(value[0])) {
                        this.valueCode = []
                        value.forEach((item) => {
                            if (item) {
                                if (item.length === 6) {
                                    // 选到省市区
                                    const province = item.substring(0, 2)
                                    const city = item.substring(2, 4)
                                    const area = item.substring(4, 6)
                                    this.valueCode.push({
                                        province: province + '0000',
                                        city: city === '00' ? '' : province + city + '00',
                                        area: area === '00' ? '' : province + city + area,
                                        town: '',
                                        village: ''
                                    })
                                } else if (item.length === 12) {
                                    // 选到镇村
                                    this.valueCode.push({
                                        province: item.substring(0, 2) + '0000',
                                        city: item.substring(0, 4) + '00',
                                        area: item.substring(0, 6),
                                        town: item.length === 12 ? item : item.substring(0, 12),
                                        village: item.length === 16 ? item : ''
                                    })
                                }
                            }
                        })
                        this.getValue()
                    }
                }
            }
        }
    },
    created () {
        this.options = areaList.areaList
        // this.getList()
    },
    mounted () {

    },
    methods: {
        // async getList (code) {
        //     let options = []
        //     const res = await this.$ApiServer.getGovList({
        //         code
        //     })
        //     if (res.code === 200) {
        //         options = res.data
        //         options.forEach((item) => {
        //             item.leaf = item.tier === this.maxLevel
        //             item.code = item.code.toString()
        //         })
        //         if (!code) {
        //             let obj = {}
        //             options.forEach((item, index) => {
        //                 if (item.code === '510000') {
        //                     obj = item
        //                     options.splice(index, 1)
        //                 }
        //             })
        //             options.unshift(obj)
        //         }
        //     }
        //     if (!code) this.options = options
        //     return options
        // },
        onChange (value) {
            if (value && value.length) {
                this.$emit('change', value)
            } else {
                this.$emit('change', [])
            }
        },
        /**
         * 数组遍历
         * 按照层级分组
         * 每层查询
         * 最后一层不用查
         */
        // async getDefault () {
        //     console.log(this.valueCode)
        //     let provinceList = []
        //     let cityList = []
        //     let areaList = []
        //     let townList = []
        //     let villageList = []
        //     this.valueCode.forEach((item) => {
        //         provinceList.push(item.province)
        //         cityList.push(item.city)
        //         areaList.push(item.area)
        //         townList.push(item.town)
        //         villageList.push(item.village)
        //     })
        //
        //     provinceList = Array.from(new Set(provinceList.filter(item => item)))
        //     cityList = Array.from(new Set(cityList.filter(item => item)))
        //     areaList = Array.from(new Set(areaList.filter(item => item)))
        //     townList = Array.from(new Set(townList.filter(item => item)))
        //     villageList = Array.from(new Set(villageList.filter(item => item)))
        //     const allList = [provinceList, cityList, areaList, townList, villageList]
        //     console.log(allList, 'allList')
        //
        //     const getItem = (list) => {
        //         if (list.length) {
        //             list.forEach(async (item) => {
        //                 // if (allList[item.tier - 1].includes(item.code)) {
        //                 //     console.log(item.code, item, 'item')
        //                 item.children = await this.getList(item.code)
        //                 if (item.tier + 1 < this.maxLevel) {
        //                     getItem(item.children)
        //                 }
        //                 // }
        //             })
        //         }
        //     }
        //     if (!this.options.length) {
        //         await this.getList()
        //     }
        //     getItem(this.options)
        //     if (this.valueCode.length) {
        //         this.getValue()
        //     }
        // },
        getValue () {
            this.cityValue = []
            const arr = []
            this.valueCode.forEach((item) => {
                const { province, city, area, town, village } = item
                arr.push([province, city, area, town, village].filter(item => item))
            })
            this.cityValue = arr
        }
    }
}
</script>

<style scoped>

</style>
